<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@animxyz/vue"></script>
  </head>
  <body>
    <style>
      .photo {
        display: inline-block;
        position: relative;
      }

      .mask {
        position: absolute;
        bottom: 10px;
        left: 0;
        height: 40px;
        width: 100%;
        background-color: #fdfdfd;
        text-align: center;
        line-height: 40px;
        font-size: 18px;
        color: #605959;
        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
          sans-serif;
        font-weight: 500;
        padding-right: 5px;
        box-sizing: border-box;
      }
    </style>
    <div
      class="item-group"
      xyz="fade down-1 left-1 back-2 narrow-1 short-2 thick-2 skew-down-1 skew-left-0"
    >
      <div class="square xyz-out"></div>
      <div class="square xyz-out"></div>
      <div class="square xyz-out"></div>
    </div>
    <script>
      // 函数一
      function Fun1() {
        return new Promise((resolve, reject) => {
          console.log("执行了函数一");
          reject("报错了");
        });
      }

      //   函数二;
      function Fun2() {
        console.log("执行函数二");
      }

      //   实现多个函数按顺序执行
      function Sequence() {
        this.Fun1()
          .then((res) => {})
          .catch((err) => {
            this.Fun2();
          });
      }

      Sequence();
    </script>
  </body>
</html>
